import React, { useEffect, useRef } from 'react'
import TitleSearch from '../../components/TitleSearch'
import {
    EditOutlined,

} from '@ant-design/icons';
import { useState } from 'react';
import { Button, Form, Image, Input, InputNumber, Pagination, Popconfirm, Space, Table, Typography } from 'antd';
import api from '../../api';
import RecipeActions from './RecipeActions';
import { render } from 'react-dom';
import { Link } from 'react-router-dom';


const columns = [
    {
        title: '菜谱编号',
        dataIndex: '_id',
        width: '15%',

        align: 'center'
    },
    {
        title: '名称',
        dataIndex: 'name',
        width: '10%',

        align: 'center'
    },
    {
        title: '缩略图',
        dataIndex: 'coverpic',
        width: '10%',

        align: 'center',
        render: (coverpic) => {
            return (

                <Image
                    width={50}
                    src={coverpic}
                />
            )

        }
    },
    {
        title: '浏览量',
        dataIndex: 'pageview',
        width: '10%',

        align: 'center'
    },
    {
        title: '收藏量',
        dataIndex: 'collections',
        width: '10%',

        align: 'center'
    },
    {
        title: '是否免费',
        dataIndex: 'isFree',
        render: (isFree) => {
            return isFree == 'Y' ? '是' : '否'
        },
        width: '10%',
        align: 'center'
    },
    {
        title: '是否热点',
        dataIndex: 'isHot',
        render: (isHot) => {
            return isHot == 'Y' ? '是' : '否'
        },
        width: '10%',
        align: 'center'
    },

];

const RecipePage = () => {


    const mergeColumns = [
        ...columns,
        {
            title: '原料',
            dataIndex: 'ingredient',
            width: '10%',
            align: 'center',
            render: (dataIndex, ingredient) => {
                // console.log('原料', ingredient);
                return (
                    <Space>
                        <Link to={`/recipe/xiangqing?id=${ingredient._id}&type=yl`}  state={{ parentId: ingredient._id }}>查看</Link>
                    </Space>
                )
            }
        },
        {
            title: '制作步骤',
            dataIndex: 'method',
            width: '10%',
            align: 'center',
            render: (dataIndex, method) => {
                return (
                    <Space>
                        <Link to={`/recipe/xiangqing?id=${method._id}&type=ac`} state={{ _id: method._id }}>查看</Link>
                    </Space>
                )
            }
        },
        {
            title: '操作',
            width: '15%',
            align: 'center',
            // record是拿到整个数据对象
            render: (record) => {
                return (
                    <Space>
                        <Button type="primary" icon={<EditOutlined />} onClick={() => {
                            RecipeRef.current.showMod(record)
                        }}>修改</Button>
                    </Space>
                )
            },
        },
    ]

    const [data, setData] = useState([]);
    // 数量
    const [total, settotal] = useState(0)
    // 分页数据
    const [pageData, setpageData] = useState({ pageSize: 5, currentPage: 1 })
    // 搜索
    const [searchValue, setsearchValue] = useState('')
    const RecipeRef = useRef()
    useEffect(() => {
        getSearchMenu()

    }, [pageData, searchValue])
    // 获取菜谱
    const getSearchMenu = async () => {
        const res = await api.searchMenu.getAlladmins({
            ...pageData,
            searchValue,
        })
        console.log(res);
        if (res.meta.status == 200) {
            setData(res.menus)
            settotal(res.total)
        }
    }
    // 当前页码和每页条数改变时触发
    const onpageChange = (currentPage, pageSize) => {
        setpageData({ currentPage, pageSize })
    }

    return (
        <div>
            <TitleSearch title='菜谱管理' />

            <Table
                // 表格边框
                bordered
                // 数据项
                dataSource={data}
                // 表格列
                columns={mergeColumns}
                // 每一项的key
                rowKey='_id'
                pagination={false}
            />

            <RecipeActions ref={RecipeRef} getSearchMenu={getSearchMenu} />
            <Pagination
                align='end'
                // 获取多少条数据
                total={total}
                showSizeChanger
                current={pageData.currentPage}
                pageSize={pageData.pageSize}
                onChange={onpageChange}
                // 固定每页数据格式
                pageSizeOptions={[5, 10, 20, 50]}
                // 字符串拼接显示有多少数据
                showTotal={(total) => `共计${total}条数据`}
            />
        </div>
    )
}

export default RecipePage